<template>
    <div>
        <h1>home</h1>

        <blockquote>
            这里的一个组件分成了3个文件(index.vue, main.js, styles.less).虽然和推荐的".vue"单文件模板不同.
            但是,在构建大的组件时,可能会使得代码超过300行,影响阅读.因此采用了现在的模式.
        </blockquote>

        <div :class="$style.tabs">
            <label
                v-for="v in tabs"
                :key="v"
                :class="v === currTab ? $style.tabItemActive : $style.tabItem"
                @click="onTab(v)"
            >{{v}}</label>
        </div>

        <div :class="$style.tabContent">
            <section v-show="currTab === 'less'">
                <h2>less css module</h2>
                <ol>
                    <li>
                        <p>在 ".vue" 的 "style" 标签中添加"module"属性,即可使样式文件使用"css module"模式.</p>
                    </li>
                    <li>
                        <p>开启 "module" 后,在 "vm" 实例中,会添加一个 "$style" 属性,该属性是一个 "css类名" 和 "哈希后的真是类名" 一一对应的对象.</p>
                        <p>$style = { myClassName : "myClassName_hash_abcdefg" }</p>
                    </li>
                    <li>
                        <p>使用:</p>
                        <p>:class="$style.myClassName"</p>
                    </li>
                </ol>
            </section>

            <section v-show="currTab === 'router'">
                <h2>router</h2>
                <ol>
                    <li>
                        <p>在这里,路由的传参方式没有使用"params",而是使用"query".</p>
                        <p>使用:</p>
                        <p>:to="{ name: 'about', query: { msg:'route to about page' }}"</p>
                    </li>
                </ol>

                <router-link
                    :class="$style.link"
                    :to="{name:'about',query: { msg:'route to about page' }}"
                >go to about</router-link>
            </section>

            <section v-show="currTab === 'vuex'">
                <h2>vuex</h2>

                <div :class="$style.counter">
                    <span
                        :class="$style.counterBtn"
                        @click="sub"
                    >-</span>
                    <span :class="$style.count">{{count}}</span>
                    <span
                        :class="$style.counterBtn"
                        @click="add"
                    >+</span>
                </div>
            </section>
        </div>
    </div>
</template>

<script src="./main.js"></script>

<style lang="less" src="./styles.less" module></style>
